<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>DeathGhost-我的购物车</title>
    <meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发"/>
    <meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!"/>
    <meta name="author" content="DeathGhost"/>
    <link href="/style/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/public.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
       <script type="text/javascript" src="/js/jqpublic.js"></script>
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/layer/layer.js"></script>
    <script type="text/javascript">
        //计算商品总价
        function  total(){
            let count=0;
            $(".cartIds:checked").each(function(){
                if($(".cartIds:checked")){
                    //获取商品前复选框的name属性值
                    let name1 = "x" + $(this).attr('name');
                    //获取属性值与复选框相同的列的值     选中商品的总数
                    let znum = $("[name='" + name1 + "']").val();
                    //获取单项商品单价
                    let dmoney = $("[name='" + name1 + "']").parent().next().text();
                    //计算商品总价
                    let moneys=new Number(dmoney).toFixed(2);
                    count+=moneys*parseInt(znum);
                }
            });
            $("#zong").text(new Number(count).toFixed(2));
        }

        $(function () {
            $(".cartIds").bind("click",function(){
                total();
            });

            //全选 与否
            $(".selAll").click(function () {
                $(".selAll").attr("checked", $(this).attr("checked"));
                $(".cartIds").attr("checked", $(this).attr("checked"));
                $("#xnum").text($(".cartIds:checked").length);
                $(".money").text();
                total();
            });
            //商品复选框   是否全选,半选
            $(".cartIds").click(function () {
                if ($(".cartIds").length == $(".cartIds:checked").length) {
                    $(".selAll").attr("indeterminate", false);
                    $(".selAll").attr("checked", true);
                } else if ($(".cartIds:checked").length == 0) {
                    $(".selAll").attr("indeterminate", false);
                    $(".selAll").attr("checked", false);
                } else {
                    $(".selAll").attr("checked", false);
                    $(".selAll").attr("indeterminate", true);
                }
                //计算商品总件数
                $("#xnum").text($(".cartIds:checked").length);
                console.log("aaa"+$(this).attr("data-cartid"))
        });
        //调整数量减少`
        $(".reduce").click(function () {
            let num = $(this).next().val() - 1;
            if (num <= 0) {
                $(this).next().val(0);
            } else {
                $(this).next().val($(this).next().val() - 1);
            }
            total();
            let id=$(this).attr("id");

            let data={
                "dishId":this.id,
                "nums":num,
                "id":$(this).attr("name")
            }
                axios.post("/cart/reduce",data).then(r=>{
                if(r.data.code===501){
                    alert("数量不能小于0")
                }
            });
        });
        //调整数量增加
        $(".add").click(function () {
            let upnum=parseInt($(this).prev().val())+1;
            $(this).prev().val(upnum);
            total();
            let id=$(this).attr("id");
            let data={
                "dishId":this.id,
                "nums":upnum,
                "id":$(this).attr("name")
            }
            axios.post("/cart/reduce",data).then(r=>{
                if(r.data.code===200){
                    alert("成功")
                }
            });
        });
        //及时校验   不是正整数边为一
        $(".nums").blur(function () {
            let nums = $(this).val();
            let ex = /^\d+$/;
            if (!ex.test(nums)) {
                $(this).val("1");
            }
            total();
        });
        })
       /* function sub(){
            /!*let dishIds=[];*!/
            let ids=[];

            $(".cartIds:checked").each(function(){
                /!*let dish=$(this).attr("name");*!/
                let cart=$(this).attr("data-cartid");
                /!*dishIds.push(dish);*!/
                ids.push(cart)
            })
            /!*console.log(dishIds+":::"+ids);*!/
            let data={
                /!*"dishId":dishIds,*!/
                "ids":ids
            }
            console.log(data);
            //ResponseEntity   数据存在data中这边去出来,在发请求  发送到 展示页面
            axios.post("/cart/order",data).then(r=>{});
        }*/
        function finish(){
            let form1=document.getElementById("form1");
            let cartIds=document.getElementsByClassName("cartIds");
            console.log(cartIds);
            for(let cartId of cartIds){
                if(cartId.checked){
                    //创建标签       附带商品ID
                    let gid=document.createElement("input");
                    gid.type="text";
                    gid.name="id";
                    gid.value=cartId.getAttribute("data-cartid")
                    form1.appendChild(gid);
                }
            }
           form1.submit();
        }
    </script>
</head>
<body>
<header class="header">


</header>
<script>

    $('.header').load('/header.html', function (responseTxt, statusTxt, xhr) {
        console.log('responseTxt,statusTxt,xhr')
    })

</script>
<!--Start content-->
<form action="/cart/order" id="form1" method="post">
    <div class="gwc" style=" margin:auto;">
        <table cellpadding="0" cellspacing="0" class="gwc_tb1">
            <tr>
                <td class="tb1_td1"><input id="" type="checkbox" class="selAll"/></td>
                <td class="tb1_td1">全选</td>
                <td class="tb1_td3">商品</td>
                <td class="tb1_td4">原价</td>
                <td class="tb1_td5">数量</td>
                <td class="tb1_td6">单价</td>
                <td class="tb1_td7">操作</td>
            </tr>
        </table>
        <table th:each="cart:${carts}" cellpadding="0" cellspacing="0" class="gwc_tb2" id="table1">
            <tr>
                <td class="tb2_td1"><input type="checkbox" th:data-cartid="${cart.id}" value="" th:name=|${cart.getDish().getId()}| th:id="${cart.getDish().getId()}" class="cartIds"/>
                </td>
                <td class="tb2_td2"><a th:href="detailsp.html" target="_blank"><img
                        th:src="'/'+${cart.getDish().getPicture()}"/></a></td>
                <td class="tb2_td3"><a th:href="detailsp.html" target="_blank"
                                       th:text="${cart.getDish().getDishName()}"></a></td>
                <td class="tb1_td4"><s th:text="${cart.getDish().getMarketPrice()}"></s></td>
                <td class="tb1_td5">
                    <input class="reduce" th:name="${cart.getId()}" th:id="${cart.getDish().getId()}" style="width:30px; height:30px;border:1px solid #ccc;" type="button"
                           value="-"/>
                    <input class="nums" th:name=|x${cart.getDish().getId()}| type="text" th:value="${cart.getNums()}"
                           style=" width:40px;height:28px; text-align:center; border:1px solid #ccc;"/>
                    <input class="add" th:name="${cart.getId()}" th:id="${cart.getDish().getId()}" style="width:30px; height:30px;border:1px solid #ccc;" type="button"
                           value="+"/>
                </td>
                <td class="tb1_td6"><label id="total1" class="tot"
                                           style="color:#ff5500;font-size:14px; font-weight:bold;"
                                           th:text="${cart.getDish().getPrice()}"></label></td>
                <td class="tb1_td7"><a href="#" id="delcart1">删除</a></td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" class="gwc_tb3">
            <tr>
                <td class="tb1_td1"><input class="selAll" type="checkbox"/></td>
                <td class="tb1_td1">全选</td>
                <td class="tb3_td2 GoBack_Buy Font14"><a href="#" target="_blank">继续购物</a></td>
                <td class="tb3_td2">已选商品
                    <label id="xnum" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label>件
                </td>
                <td class="tb3_td3">合计(不含运费):<span class="money">￥</span><span style=" color:#ff5500;">
        <label id="zong" style="color:#ff5500;font-size:14px; font-weight:bold;">0.00</label>
        </span></td>
                <td class="tb3_td4"><a class="jz2" href="javascript:finish()">结算</a></td>
            </tr>
        </table>
    </div>
</form>

<footer>
    <section class="Otherlink">
        <aside>
            <div class="ewm-left">
                <p>手机扫描二维码：</p>
                <img src="/images/Android_ico_d.gif">
                <img src="/images/iphone_ico_d.gif">
            </div>
            <div class="tips">
                <p>客服热线</p>
                <p><i>1830927**73</i></p>
                <p>配送时间</p>
                <p>
                    <time>09：00</time>
                    ~
                    <time>22:00</time>
                </p>
                <p>网站公告</p>
            </div>
        </aside>
        <section>
            <div>
                <span><i class="i1"></i>配送支付</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i2"></i>关于我们</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i3"></i>帮助中心</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
                </ul>
            </div>
        </section>
    </section>
    <div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn"
                                                          title="DeathGhost">DeathGhost</a></div>
</footer>
</body>
</html>
